<!--课程子模块-->
<template>
  <div>
    <div class="son">
      <ul v-for="(item,index) in classList" :key=index @click=goClassPage(item.courseId)>
        <div v-if="item.bannerFileUrl">
          <li><img :src="item.bannerFileUrl" alt=""></li>
          <li>{{ item.courseTitle }}</li>
          <li> 共{{ item.subSectionNum }}节课 | {{ item.learningNum }}人报名</li>
          <li v-if="item.isFree==='1'" class="green">免费</li>
          <li v-else>
            <span>￥{{ item.discountPrice }}</span>
            <span>￥{{ item.coursePrice }} </span>
            <div class="discount">
              限时钜惠
            </div>
          </li>
          <!--        <li>{{ item.discountPrice | money }}</li>-->
          <!--        <li v-if="flag">{{ item.discountDesc }}</li>-->
        </div>
        <div v-else>
          <li><img :src="item.coverFileUrl" alt=""></li>
          <li>{{ item.courseTitle }}</li>
          <li> 共{{ item.subSectionNum }}节课 | {{ item.learningNum }}人报名</li>
          <li v-if="item.isFree==='1'" class="green">免费</li>
          <li v-else>
            <span>￥{{ item.discountPrice }}</span>
            <span>￥{{ item.coursePrice }} </span>
            <div class="discount">
              限时钜惠
            </div>
          </li>
        </div>
      </ul>
    </div>

  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "ClassesSon",
  props: {
    classList: [Array, String]
  },
  ...mapState(["classID"]),
  methods: {
    goClassPage(e) {
      console.log(e)
      this.$store.commit("changeClassId", {classID: e})
      this.$router.push('/ClassPage/' + e)
    }
  }
}
</script>

<style scoped lang="less">
.green {
  color: #00cf8c;
}

.son {
  width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  //align-items: center;

  ul {
    width: 220px;
    //height: 200px;
    list-style: none;
    padding: 0;
    margin-top: 20px;
    margin-right: 20px;

    li:nth-of-type(2) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    li:nth-of-type(3) {
      color: #888888;
    }

    li:nth-of-type(1) {
      width: 220px;
      height: 120px;
      overflow: hidden;

      img {
        width: 220px;
        height: 120px;
        transition: transform 0.5s ease;
      }

      img:hover {
        transform: scale(1.1);
      }

    }

    span:nth-of-type(1) {
      color: #ff4500;
      font-weight: bold;
    }

    span:nth-of-type(2) {
      font-size: 12px;
      color: #999999;
      text-decoration: line-through;
    }
  }
}

ul:hover {
  li:nth-of-type(2) {
    color: #178265;
  }
}

.discount {
  float: right;
  font-size: 12px;
  margin-right: 8px;
  padding: 2px 6px;
  color: #fa8c16;
  background-color: #fff7e6;
  border: 1px solid #ffd591;
}
</style>